{extend name="public:base" /}
{block name="style"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/others/ueditor/third-party/webuploader/webuploader.css">
<style>
    .articleForm {
        padding: 10px;
    }
    .h30{
        height: 30px;
        line-height: 30px;
    }
</style>
{/block}
{block name="main-content"}
<div class="page-content">

    <div class="row">
        <form class="articleForm" action="{:url('admin/article/set')}" method="post">
            <div class="col-md-4 col-xs-12">

                <div class="form-group">
                    <label for="subject">文章名称</label>
                    <input type="text" class="form-control" id="subject" name="subject" value="{$article.subject}" required placeholder="文章名称">
                </div>

                <div class="form-group">
                    <label for="cid">所属文章</label>
                    <select class="form-control" id="cid" name="cid">
                        {foreach  name="cids" id="vo"}
                        <option value="{$vo.id}" {if condition="isset($article) && $article.cid == $vo.id"}selected{/if}>{$vo.name}</option>
                            {if isset($vo['son'])}
                                {foreach $vo['son'] as $son}
                                <option value="{$son.id}" {if condition="isset($article) && $article.cid == $son.id"}selected{/if}>|--{$son.name}</option>
                                {/foreach}
                            {/if}
                        {/foreach}
                    </select>
                </div>
                <div class="form-group">
                    <label for="status">状态</label>
                    <select class="form-control" id="status" name="status">
                        {foreach  name="status" id="vo" key="key"}
                        <option value="{$key}" {if condition="isset($article) && $article->getData('status') == $key"}selected{/if}>{$vo}</option>
                        {/foreach}
                    </select>
                </div>
                <div class="form-group">
                    <label for="dis_order">排序</label>
                    <input type="text" class="form-control" id="dis_order" name="dis_order" value="{if condition="isset($article.dis_order)"}{$article.dis_order}{else}99{/if}" required placeholder="文章排序">
                </div>
                <div class="form-group">
                    <label for="seo_title">SEO标题</label>
                    <input type="text" class="form-control" id="seo_title" name="seo_title" value="{$articleDetail.seo_title}" required placeholder="文章SEO标题">
                </div>
                <div class="form-group">
                    <label for="seo_keywords">关键字</label>
                    <input type="text" class="form-control" id="seo_keywords" name="seo_keywords" value="{$articleDetail.seo_keywords}" required placeholder="文章关键字">
                </div>
                <div class="form-group">
                    <label for="seo_desc">描述</label>
                    <textarea class="form-control" id="seo_desc" name="seo_desc" style="resize: none;height: 100px;">{$articleDetail.seo_desc}</textarea>
                </div>
                <input type="hidden" id="id" name="id" value="{$article.id}">

            </div>
            <div class="col-md-8 col-xs-12">
                <div class="form-group">
                    <label for="uploader-cover">封面图片</label>
                    <div id="uploader-cover">
                        <!--用来存放item-->
                        <div id="fileList" class="uploader-list"></div>
                        <div id="filePicker">选择图片</div>
                        <input type="hidden" id="aids" name="aids" value="{$attach.aid}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="content">文章内容</label>
                    <textarea name="content" id="content" style="height: 320px; width: 100%;" required placeholder="文章内容">{$articleDetail.content}</textarea>
                </div>
            </div>
            <div class="col-md-12 col-xs-12">
                <button type="submit" class="btn btn-primary">保存</button>
            </div>

        </form>
    </div><!-- /.row -->
</div><!-- /.page-content -->
{/block}

{block name="scripts"}
<script src="__PUBLIC__/others/ueditor/third-party/webuploader/webuploader.min.js"></script>
<script src="__PUBLIC__/others/ueditor/ueditor.config.js"></script>
<script src="__PUBLIC__/others/ueditor/ueditor.all.min.js"></script>
<script src="__PUBLIC__/others/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    var dt = {};

    /* 添加文章 */
    $(function () {
        $('.articleForm').ajaxForm({
            success: articleForm, // 这是提交后的方法
            dataType: 'json'
        });
    });

    //添加
    function articleForm(data) {
        if (data.code == 1) {
            $(':input', '.articleForm')
                    .not(':button, :submit, :reset, :hidden')
                    .val('')
                    .removeAttr('checked')
                    .removeAttr('selected');
            layer.msg(data.msg, {icon: 6});
            if (data.url) {
                window.location.href = data.url;
            }
        } else {
            layer.alert(data.msg, {icon: 5});
        }
    }

    $(document).ready(function () {

        //ueditor编辑器
        window.UEDITOR_CONFIG = {
            UEDITOR_HOME_URL: '__PUBLIC__/others/ueditor/',
            serverUrl : "{:url('ueditor/index')}",
            imagePath :　'public/uploads/',
            savePath : 'public/uploads',
            toolbars: [[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'drafts', 'help'
            ]],
        };

        var ue = UE.getEditor('content');
        console.log(ue);


        // 初始化Web Uploader
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            //验证文件总数量, 超出则不允许加入队列
            fileNumLimit:1,

            // swf文件路径
            swf: BASE_URL + 'others/ueditor/third-party/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: "{:url('upload/uploadimg')}",

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        var $list = $('#fileList');
        // 当有文件添加进来的时候
        // 优化retina, 在retina下这个值是2
        var ratio = 1,
                // 缩略图大小
                thumbnailWidth = 110 * ratio,
                thumbnailHeight = 110 * ratio;

        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                            '<div id="' + file.id + '" class="img-rounded">' +
                            '<img>' +
                            '</div>'
                    ),
                    $img = $li.find('img');


            // $list为容器jQuery实例
            $list.append( $li );

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        var aidArr = [];
        uploader.on( 'uploadSuccess', function( file, data ) {
            $( '#'+file.id ).addClass('upload-state-done');
            var aids = $('#aids').val();
            if (aids) {
                aids.split(',')
            }
            aidArr.push(data.aid);
            $('#aids').val(aidArr.join(','));
        });

    })



</script>
{/block}